<script lang="ts" setup>
import { ref, useTemplateRef, inject, watch } from 'vue'
import { ScrollTrigger } from 'gsap/ScrollTrigger'
import { navBarHeightKey } from '@/views/product/reno14-pro/symbol-key.ts'
import { useGsapContext } from '@/hooks'
import Accordion from '@/components/accordion/accordion.vue'
import AccordionItem from '@/components/accordion/accordion-item.vue'
import { useScrollGroup } from '@/hooks/reno14-pro.ts'

type MediaType =
  | {
      type: 'video'
      src: string
    }
  | {
      type: 'img'
      src: Record<string, string>
    }
defineProps<{
  data: {
    mainTitle: string
    subtitle: string
    list: {
      key: number
      mainTitle: string
      subtitle: string
      media: MediaType
    }[]
  }
}>()

const navBarHeight = inject(navBarHeightKey)
const { scrollGroup } = useScrollGroup()

const containerRef = useTemplateRef<HTMLDivElement | null>('containerRef')

useGsapContext(() => {
  if (!containerRef.value) {
    return
  }

  ScrollTrigger.create({
    trigger: containerRef.value,
    start: 'top bottom',
    end: () => `bottom ${navBarHeight?.value}`,
    onToggle: async (self) => {
      if (self.isActive) {
        await videoPlay()
      } else {
        stopVideo()
      }
    },
    ...scrollGroup,
  })
})

const mediaContainerRef = useTemplateRef<HTMLDivElement | null>('mediaContainerRef')
const getActiveVideo = () => {
  if (!mediaContainerRef.value) {
    return null
  }

  return mediaContainerRef.value.querySelector(
    `div[data-media="${activatedItem.value}"] > video`,
  ) as HTMLVideoElement | null
}
const videoPlay = async () => {
  const videoInstance = getActiveVideo()

  if (videoInstance) {
    await videoInstance.play().catch()
  }
}
const stopVideo = () => {
  const videoInstance = getActiveVideo()
  if (videoInstance) {
    videoInstance.pause()
    videoInstance.currentTime = 0
  }
}
const replay = async () => {
  await videoPlay()
}

const activatedItem = ref(0)

watch(activatedItem, async () => {
  stopVideo()
  await videoPlay()
})

const playing = ref(false)
</script>

<template>
  <div
    ref="containerRef"
    class="grid grid-cols-[55%_1fr] grid-rows-[min(41.7vw,350px)] mt-[9.63vw] gap-[1.5rem] lg:grid-cols-[58%_1fr] lg:grid-rows-[clamp(21.875rem,0.625rem+33.2031vw,32.5rem)] lg:gap-[clamp(1.875rem,-0.375rem+3.5156vw,3rem)] lg:mt-[5rem]"
  >
    <div ref="mediaContainerRef" class="_rounded overflow-hidden">
      <template v-for="item in data.list" :key="item.key">
        <template v-if="item.media.type === 'video'">
          <div
            :data-media="item.key"
            v-if="activatedItem === item.key"
            class="w-full h-full relative"
          >
            <video
              :src="item.media.src"
              class="w-full h-full object-cover"
              muted
              autoplay
              @play="playing = true"
              @ended="playing = false"
            ></video>

            <div
              class="absolute w-full bottom-0 left-0 grid justify-center gap-x-[4%] gap-y-[2px] grid-cols-[repeat(2,25.5%)] auto-rows-min mb-[2%]"
            >
              <img
                alt=""
                class="w-full h-[1.375rem]"
                src="@/views/product/reno14-pro/image/3/images-pocket-voice-0-1.png.webp"
              />
              <img
                alt=""
                class="w-full h-[1.375rem]"
                src="@/views/product/reno14-pro/image/3/images-pocket-voice-1-1.png.webp"
              />
              <p class="text-[0.625rem] opacity-55 text-center 2xl:text-xs">环境噪音</p>
              <p class="text-[0.625rem] opacity-55 text-center 2xl:text-xs">环境噪音</p>
              <p class="text-xs text-center 2xl:text-sm">普通手机</p>
              <p class="text-xs text-nowrap text-center 2xl:text-sm">OPPO Reno14 Pro</p>
            </div>

            <svg
              v-show="!playing"
              class="w-[2rem] aspect-square absolute bottom-[3%] right-[3%]"
              @click="replay"
            >
              <use href="#icon-replay" />
            </svg>
          </div>
        </template>

        <template v-else-if="item.media.type === 'img'">
          <picture
            :data-media="item.key"
            v-if="activatedItem === item.key"
            class="w-full h-full block"
          >
            <source :srcset="item.media.src['360']" media="(max-width: 640px)" />
            <source :srcset="item.media.src['640']" media="(max-width: 1024px)" />
            <source :srcset="item.media.src['1024']" media="(max-width: 1440px)" />
            <source :srcset="item.media.src['1440']" media="(min-width: 1440px)" />
            <img
              :src="item.media.src['360']"
              alt=""
              class="w-full h-full object-cover"
              loading="lazy"
            />
          </picture>
        </template>
      </template>
    </div>

    <div class="grid content-between">
      <div class="text-3xl 2xl:text-5xl">
        <p>{{ data.mainTitle }}</p>
        <p>{{ data.subtitle }}</p>
      </div>

      <Accordion v-model="activatedItem">
        <AccordionItem
          v-for="i in data.list"
          :key="i.key"
          :title="i.mainTitle"
          :item-key="i.key"
          :subtitle="i.subtitle"
        />
      </Accordion>
    </div>
  </div>
</template>
